<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子分类</title>
</head>

<style>
  .one {
    height: 100px;
    width: 100px;
    border: 10px solid #333;
    padding: 20px;
    margin: 30px;
    /* 边框盒子
      计算方式：
      在页面中实际占的宽度 = width + margin-left + margin-right
                        = 100 + 30 + 30 = 160px
     */
    box-sizing: border-box;
  }

  .two {
    height: 100px;
    width: 100px;
    border: 10px solid #333;
    padding: 20px;
    margin: 30px;
    /* 内容盒子 【默认盒子】
      计算方式：
        在页面中实际占的宽度 = width + padding-left + padding-right + margin-right + margin-left + border-right + border-left
                          = 100 + 20 + 20 + 30 + 30 + 10 + 10 = 220px
    */
    box-sizing: content-box;
  }
</style>
<body>
  <div class="one">1</div>

  <div class="two">2</div>
</body>
</html>